<template>
	<div class="padding-across-10">
		<headerOpreate style="width: 100%" :opreate-datas="opreateDatas" v-on:executeAction="executeAction"></headerOpreate>
		<div style="width: 100%;padding-top: 3px">
			<el-row>
				<el-col :span="14">
					<span style="font-size: 13px;font-weight: bold">检索字段</span>
					<el-select size="small" v-model="value" :placeholder="$t('message.selectModeAlert')" style="width: 90px;margin-right: 2px">
						<el-option label="名称" :value="0"></el-option>
						<el-option label="创建者" :value="1"></el-option>
					</el-select>
					<span style="font-size: 13px;font-weight: bold">关键字</span>
					<el-input style="width: 190px" size="small" v-model="searchModel" placeholder="输入检索字段关键字">
						<el-button id="searchData" slot="append" icon="search" @click="searchUrl"></el-button>
					</el-input>
				</el-col>
				<el-col :span="10" style="text-align: right">
					<div class="block" style="text-align: right;float: right;padding-bottom: 2px">
						<el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange" :current-page="currentPage" :page-size="pageSize" :page-sizes="[10,20,30,40,50]" layout="total,sizes, prev, pager, next, jumper" :total="totalSize">
						</el-pagination>
					</div>
				</el-col>
			</el-row>
		</div>
		<el-table border style="width: 100%" @selection-change="handleSelectionChange" :data="tableData">
			<el-table-column :show-overflow-tooltip="true" type="selection" align="center"></el-table-column>
			<el-table-column :show-overflow-tooltip="true" :label="$t('message.urlName')" align="center" prop="Name"></el-table-column>
			<el-table-column :show-overflow-tooltip="true" label="Url地址" align="center" prop="Path"></el-table-column>
			<el-table-column :show-overflow-tooltip="true" :label="$t('message.creater')" align="center" prop="CreatedBy"></el-table-column>
			<el-table-column :show-overflow-tooltip="true" :label="$t('message.createDate')" align="center" prop="CreatedOn"></el-table-column>
			<el-table-column :show-overflow-tooltip="true" :label="$t('message.operation')" align="center">
				<template slot-scope="scope">
					<el-button type="primary" size="small" @click="editSource(scope.row)"><i class="el-icon-edit el-icon--left"></i>{{$t('message.opreateEdit')}}</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="block" style="text-align:right;margin-bottom:60px;padding-top: 2px">
			<el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange" :current-page="currentPage" :page-size="pageSize" :page-sizes="[10,20,30,40,50]" layout="total,sizes, prev, pager, next, jumper" :total="totalSize">
			</el-pagination>
		</div>
		<el-dialog :title="$t('message.addNetworkResource')" v-model="addSourceDialog">
			<el-form ref="form" :model="form" :rules="rules" label-width="100px">
				<el-form-item :label="$t('message.title')" prop="Name">
					<el-input v-model="form.Name" style="width:80%;"></el-input>
				</el-form-item>
				<el-form-item label="URL" prop="Url">
					<el-input v-model="form.Url" style="width:80%;" type="textarea" :rows="4"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="addSourceDialog = false">取 消</el-button>
				<el-button type="primary" @click="saveSubmit1('form')">确 定</el-button>
			</div>
		</el-dialog>
		<el-dialog :title="$t('message.editNetworkResource')" v-model="editSourceDialog">
			<el-form ref="form2" :model="editForm" :rules="rules" label-width="100px">
				<el-form-item :label="$t('message.title')" prop="Name">
					<el-input v-model="editForm.Name" style="width:80%;"></el-input>
				</el-form-item>
				<el-form-item label="URL" prop="Url">
					<el-input v-model="editForm.Url" style="width:80%;" type="textarea" :rows="4"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="editSourceDialog = false">取 消</el-button>
				<el-button type="primary" @click="saveSubmit2">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
	import $ from 'jquery'
	import headerNave from '../../../../../components/headerNave'
	import headerOpreate from '../../../../../components/headerOpreate'
	import { GloabFun, HttpServer } from '../../../../../assets/js/common.js'
	export default {
		components: {
			headerNave,
			headerOpreate
		},
		data() {
			//回车触发查询按钮
			document.onkeydown = function(event) {
				var e = event || window.event;
				if(e && e.keyCode == 13) { //回车键的键值为13
					$("#searchData").click(); //调用登录按钮的登录事件
				}
			};
			return {
				isReload: false,
				value: 0,
				searchModel: '',
				addSourceDialog: false,
				editSourceDialog: false,
				tableData: [],
				form: {
					Name: '',
					Url: ''
				},
				editForm: {
					Name: '',
					Url: '',
					UrlId: ''
				},
				multipleSelection: [],
				currentPage: 1,
				pageSize: 10,
				totalSize: 0,
				rules: {
					Name: [{
						required: true,
						message: this.$t('message.resourceTitleRqueired'),
						trigger: 'blur'
					}],
					Url: [{
						required: true,
						message: this.$t('message.resourceURLRqueired'),
						trigger: 'blur'
					}]
				},
				opreateDatas: [{
					show: true,
					size: "small",
					type: 'primary',
					icon: 'el-icon-eleg-icon_refresh el-icon--left',
					name: '刷新',
					action: 'reloadDatas'
				},
				{
					show: true,
					size: "small",
					type: 'primary',
					icon: 'el-icon-plus el-icon--left',
					name: this.$t('message.add'),
					action: 'addSource'
				},
				{
					show: GloabFun.getUid() == 'admin' ? true : false,
					size: "small",
					type: "danger",
					icon: "el-icon-delete2 el-icon--left",
					name: '删除',
					action: "deleteMultiple"
				}
				],
			}
		},
		props: {
			subArgs: {
				type: Object,
				default: function() {
					return {};
				}
			}
		},
		methods: {
			executeAction(action) {
				if(action) {
					this[action]();
				}
			},
			addSource() {
				this.form = {
					Name: '',
					Url: ''
				};
				this.addSourceDialog = true;
			},
			editSource(row) {
				this.editSourceDialog = true;
				this.editForm.Name = row.Name;
				this.editForm.Url = row.Path;
				this.editForm.UrlId = row.UrlId;
			},
			handleSizeChange(val) {
				this.pageSize = val;
				this.getDatas();
			},
			handleCurrentChange(val) {
				this.currentPage = val;
				this.getDatas();
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			searchUrl(){
				this.getDatas();
			},
			formateSelection() {
				var result = [],
				array = this.multipleSelection;
				for(var i = 0; i < array.length; i++) {
					result.push(array[i].UrlId);
				}
				return result;
			},
			deleteMultiple() {
				if(this.formateSelection().length > 0) {
					this.$confirm(this.$t('message.bulkDeleteWarning'), this.$t('message.warning'), {
						confirmButtonText: this.$t('message.yes'),
						cancelButtonText: this.$t('message.no'),
						type: 'warning'
					}).then(() => {
						//批量删除成功处理
						var param = {
							"UserId": parseInt(GloabFun.getKeyId()),
							"keyid": this.formateSelection()
						}
						HttpServer.httpPost.call(this, '/Api/User/Urls/Delete', param, function(response) {}, function(response) {
							if(response.data.code === 0) {
								this.getDatas();
								this.$notify({
									title: '成功',
									message: this.$t('message.bulkDeleteSuccess'),
									type: 'success',
									duration: 2500
								});
							} else {
								this.$notify.error({
									title: '错误',
									message: response.data.msg,
									duration: 2500
								});
							}
						});
					}).catch(() => {
						//取消批量删除处理
						this.$notify.info({
							title: '消息',
							message: this.$t('message.cancleOperation'),
							duration: 2500
						})
					});
				} else {
					this.$notify({
						title: this.$t('message.warning'),
						message: this.$t('message.selectBulkDeleteWarning'),
						type: 'warning',
						duration: 2500
					});
				}
			},
			//新增
			saveSubmit1(formName) {
				this.$refs[formName].validate((valid) => {
					if(valid) {
						//新增提交
						var param = {
							"name": this.form.Name,
							"url": this.form.Url,
							"UserId": parseInt(GloabFun.getKeyId())
						}
						HttpServer.httpPost.call(this, '/Api/User/Urls/Post', param, function(response) {}, function(response) {
							if(response.data.code === 0) {
								this.$notify({
									title: '成功',
									message: this.$t('message.addSuccess'),
									type: 'success',
									duration: 2500
								});
								this.form = {
									Name: '',
									Url: ''
								};
								this.addSourceDialog = false;
								this.getDatas();
							} else {
								this.$notify.error({
									title: '错误',
									message: response.data.msg,
									duration: 2500
								});
							}
						});
					} else {
						return false;
					}
				});
			},
			saveSubmit2() {
				this.$refs['form2'].validate((valid) => {
					if(valid) {
						//修改提交
						var param = {
							"UrlId": this.editForm.UrlId,
							"name": this.editForm.Name,
							"url": this.editForm.Url,
							"UserId": parseInt(GloabFun.getKeyId())
						}
						HttpServer.httpPost.call(this, '/Api/User/Urls/Put', param, function(response) {}, function(response) {
							if(response.data.code === 0) {
								this.$notify({
									title: '成功',
									message: this.$t('message.saveSuccess'),
									type: 'success',
									duration: 2500
								});
								this.editSourceDialog = false;
								this.getDatas();
							} else {
								this.$notify.error({
									title: '错误',
									message: response.data.msg,
									duration: 2500
								});
							}
						});
					} else {
						return false;
					}
				});
			},
			//刷新
			reloadDatas() {
				this.isReload = true;
				this.getDatas();
			},
			getDatas() {
				var param = {
					createdby: this.value === 1 ? this.searchModel : '',
					name: this.value === 0 ? this.searchModel : '',
					page: this.currentPage,
					size: this.pageSize,
					filter: "",
					UserId: parseInt(GloabFun.getKeyId())
				}
				HttpServer.httpPost.call(this, '/Api/User/Urls', param, function(response) {}, function(response) {
					if(response.data.code === 0) {
						this.tableData = response.data.data;
						this.totalSize = response.data.total;
						if(this.isReload){
							this.$notify({
								title: '成功',
								message: this.$t('message.refreshSuccess'),
								type: 'success',
								duration: 2500
							});
						}
					} else {
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
					this.isReload = false;
				});
			}
		},
		created() {
			this.getDatas();
		}
	}
</script>